<template>
  <div 
    class="horizontal-scroll-container"
    @mousedown="handleMouseDown"
    @mousemove="handleMouseMove"
    @mouseup="handleMouseUp"
    @mouseleave="handleMouseUp"
  >
    <div class="horizontal-scroll-content">
      <div 
        v-for="(item, index) in cardData" 
        :key="item.id"
        class="card-wrapper"
      >
        <el-card 
          style="width: 360px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); margin-right: 20px;"
          @click="goToDetail(item.id)"
          class="salary-card"
        >
          <!-- 顶部信息栏 -->
          <div class="top-info">
            <div class="job-labels">
              <span class="label">{{ item.title }}</span>
              <span class="level">职级：{{ item.level.level_code }}</span>
            </div>
            <span class="time">{{ item.created_at ? formatTime(item.created_at) : '15小时前' }}</span>
          </div>

          <!-- 公司Logo 和 名称 -->
          <div class="company-header">
            <span class="company-name">{{ item.company.name }}</span>
          </div>

          <!-- 薪酬信息 -->
          <div class="salary-info">
              <div class="salary-section">
                <p class="salary-item">
                  <strong>总薪酬：</strong>
                  <span class="amount">{{ formatCurrency(item.total_comp) }}/{{ item.currency_code }}/年</span>
                </p>
                <p class="salary-item">
                  <strong>月薪：</strong>
                  <span class="amount">{{ formatCurrency(item.base_monthly_comp) }}/{{ item.currency_code }}/月</span>
                </p>
                <p class="salary-item">
                  <strong>股票：</strong>
                  <span class="amount">{{ formatCurrency(item.stock_comp) }}/{{ item.currency_code }}/年</span>
                </p>
                 <p class="footer-text">
                  <i class="el-icon-location"></i> {{ item.location }} | {{ item.country }}
                 </p>
              </div>
              <div class="company-image">
                 <img 
                    v-if="item.company.logo_url" 
                    :src="baseUrl + item.company.logo_url" 
                    alt="Company Logo" 
                    class="company-image-logo"
                  />
              </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { SalariesdataApi } from '@/utils/api.js'
import apiConfig from '@/utils/apiConfig' // 👈 引入配置

const router = useRouter()
const baseUrl = apiConfig.imageBaseURL.development // 👈 获取基础 URL

const cardData = ref([])
const isDragging = ref(false)
const startX = ref(0)
const scrollLeft = ref(0)
const containerRef = ref(null)

// 格式化货币显示
const formatCurrency = (amount) => {
  if (!amount) return '0'
  return (amount / 10000).toFixed(0) + '万'
}

// 格式化时间（如 "15小时前"）
const formatTime = (timestamp) => {
  const now = new Date()
  const time = new Date(timestamp)
  const diffInHours = Math.floor((now - time) / (1000 * 60 * 60))
  if (diffInHours < 24) {
    return `${diffInHours}小时前`
  }
  return `${Math.floor(diffInHours / 24)}天前`
}

// 鼠标按下事件处理
const handleMouseDown = (e) => {
  isDragging.value = true
  startX.value = e.pageX - e.currentTarget.offsetLeft
  scrollLeft.value = e.currentTarget.scrollLeft
  e.currentTarget.style.cursor = 'grabbing'
}

// 鼠标移动事件处理
const handleMouseMove = (e) => {
  if (!isDragging.value) return
  e.preventDefault()
  const x = e.pageX - e.currentTarget.offsetLeft
  const walk = (x - startX.value) * 2 // 滚动速度
  e.currentTarget.scrollLeft = scrollLeft.value - walk
}

// 鼠标释放事件处理
const handleMouseUp = (e) => {
  isDragging.value = false
  if (e.currentTarget) {
    e.currentTarget.style.cursor = 'grab'
  }
}

// 点击卡片跳转到详情页
const goToDetail = (id) => {
  if (id) {
    router.push(`/workplaceroast/${id}`);
  }
}

// 获取最新薪酬数据
const fetchSalaryData = async () => {
  try {
    const response = await SalariesdataApi.getDataList({
      page: 1,
      size: 6  // 修改为获取6条数据
    })

    // 提取数据并处理
    cardData.value = response.data.slice(0, 6).map(item => ({
      id: item.id,
      title: item.title,
      total_comp: item.total_comp,
      base_monthly_comp: item.base_monthly_comp,
      stock_comp: item.stock_comp,
      location: item.location,
      country: item.country,
      currency_code: item.currency_code,
      company: item.company,
      level: item.level,
      created_at: item.created_at
    }))
  } catch (error) {
    console.error('获取薪酬数据失败:', error)
  }
}

onMounted(() => {
  fetchSalaryData()
})
</script>

<style scoped>
.horizontal-scroll-container {
  width: 100%;
  overflow-x: auto;
  padding-bottom: 10px;
  cursor: grab;
}

.salary-card {
  cursor: pointer;
}

.horizontal-scroll-container:active {
  cursor: grabbing;
}

.horizontal-scroll-content {
  display: flex;
  flex-direction: row;
}

.card-wrapper {
  flex: 0 0 auto;
}

.salary-info{
  display: flex;
  justify-content: space-between;
  align-items: end;
}
.company-image-logo{
  width: 80px;
  height: 80px;
  border-radius: 10%;
  object-fit: cover;
  max-width: 100%;
}

.top-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  /* border-bottom: 1px solid #eee; */
}

.job-labels {
  display: flex;
  gap: 8px;
  align-items: center;
}

.label {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.level {
  font-size: 12px;
  color: #999;
}

.time {
  font-size: 12px;
  color: #999;
}

.company-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 0;
}

.company-name {
  font-weight: bold;
  color: #333;
  font-size: 16px;
}

.salary-item {
  margin: 8px 0;
  font-size: 14px;
}

.amount {
  color: #1f7dfe;
  font-weight: 500;
}

.footer-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #606266;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.el-icon-location {
  font-size: 12px;
}

/* 隐藏滚动条样式（可选） */
.horizontal-scroll-container::-webkit-scrollbar {
  height: 6px;
}

.horizontal-scroll-container::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
  border-radius: 3px;
}

.horizontal-scroll-container::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}
</style>